<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>异清轩博客</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/login.js"></script>
  <script src="js/blog.js"></script>
</head>

<body class="user-select">
<div id="app">
  <mymain>
    <div style="text-align: center">
      <h1>{{argue.title}}</h1>
      <div style="display: flex; justify-content: center; margin-block: 20px; align-items: center">
        正方( {{argue.pNums}} 人 )
        <div style="width: 300px; display: flex; height: 22px; margin: 10px">
          <div style="background-color: red;border-top-left-radius: 11px; border-bottom-left-radius: 11px"
               :style="{width:argue.pNums*100/(argue.pNums+argue.nNums)+'%'}"></div>
          <div style="background-color: blue;border-top-right-radius: 11px; border-bottom-right-radius: 11px"
               :style="{width:argue.nNums*100/(argue.pNums+argue.nNums)+'%'}"></div>
        </div>
        ( {{argue.nNums}} 人)反方
      </div>

      <div style="width: 600px; margin: auto">
        <div style="display: flex; justify-content: center; margin-block: 10px">
          <div style="width: 30%; margin-right: 5px; flex-grow: 1">
            <div>{{argue.positive}}</div>
            <form style="text-align: right">
              <textarea v-model="positive.content" cols="30" rows="5" style="width: 100%; padding: 10px"></textarea>
              <button style="padding: 2px 10px" @click.prevent="submit(positive)">发表</button>
            </form>
          </div>
          <div style="width: 30%; flex-grow: 1">
            <div>{{argue.negative}}</div>
            <form style="text-align: right">
              <textarea v-model="negative.content" cols="30" rows="5" style="width: 100%; padding: 10px"></textarea>
              <button style="padding: 2px 10px" @click.prevent="submit(negative)">发表</button>
            </form>
          </div>
        </div>
        <div>
          <div style="padding: 5px 10px; display: flex; justify-content: space-between;background-color: #ddd">
            更多评论
            <a href="">更多...</a>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div style="width: 48%"></div>
            <div style="width: 48%"></div>
          </div>
        </div>
      </div>
    </div>
  </mymain>
</div>
<script>
  var v = new Vue({
    el: "#app",
    data:{
      argue:{},
      positive:{approve:'positive', content:""},
      negative:{approve:'negative', content:""}
    },
    created(){
      axios.get("/myblog/argue/queryById" + location.search).then(res=>{
        this.argue = res.data;
        this.positive.aid = res.data.id;
        this.negative.aid = res.data.id;
      })
    },
    methods:{
      submit(obj){
        axios.post("/myblog/argue/submit",obj).then(res=>{
          if(res.data.code){
            this.$message(res.data.msg);
            if(obj.approve=='positive'){
              this.argue.pNums++;
            } else {
              this.argue.nNums++;
            }

          } else{
            this.$alert(res.data.msg);
          }
        })
      }
    }
  });
</script>

<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script>
</body>
</html>